<template>
  <div class="boxs">
    <div class="f1">
      <ul>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/kuajing/组172.png" alt="" />
            <img class="icon2" src="@/assets/kuajing/组175.png" alt="" />
          </div>
          <span style="color: #627dca">填写申请信息</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/kuajing/组174.png" alt="" />
          </div>
          <span>补充申请资料</span>
        </li>
      </ul>
    </div>

    <div class="f2">
      <!-- 2.表格 -->
      <div class="notNull">
        <el-table
          :data="applyData"
          border
          highlight-current-row
          stripe
          type="index"
          style="width: 100%"
          :header-cell-style="{
            background: '#EBEDED',
            color: '#4D4D4D'
          }"
        >
          <!-- <el-table-column type="selection" min-width="6%" align="center">
          </el-table-column> -->
          <el-table-column prop="number" label="序号" min-width="3%" align="center">
          </el-table-column>
          <el-table-column prop="name" label="文件名称" min-width="20%" align="center">
          </el-table-column>
          <el-table-column prop="yszkje" label="文件状态" min-width="4%" align="center">
          </el-table-column>

          <el-table-column label="操作" min-width="5%" align="center">
            <template slot-scope="scope">
              <span
                class="span"
                @click="applyFileUpload(scope.$index, applyData)"
                type="text"
                size="small"
              >
                上传
              </span>
              <span
                class="span"
                v-bind:class="{
                  disable: applyData[scope.$index].yszkje != '已上传'
                }"
                @click="checkApply(scope.$index, applyData)"
                type="text"
                size="small"
              >
                查看
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 服务协议 -->
      <div class="agreement">
        <img
          @click="submitBtn()"
          :src="require(`@/assets/shangpiao/组${radio ? '38' : '39'}.png`)"
          alt=""
        />
        <span> 阅读并同意 </span>
        <!-- href="http://operate.thunlink.cn/protocol/7 企业授权协议-税信宝/7 企业授权协议-税信宝.html"
          target="_back" -->
        <a @click="submitBtn()">《企业授权协议》、</a>
        <!-- href="http://operate.thunlink.cn/protocol/8 技术服务协议-税信宝/8 技术服务协议-税信宝.html"
          target="_back" -->
        <a @click="submitBtn()">《技术服务协议》</a>
      </div>
      <!-- 上一步/保存/提交 按钮 -->
      <div class="submit">
        <el-tooltip placement="top" v-if="!btn">
          <div slot="content">请勾选授权协议<br />确认填写的信息是否完整</div>
          <button
            @click="goNextFlow()"
            class="btn btn3"
            v-bind:class="{
              active: btn & radio,
              actives: submitMessage == '提交中'
            }"
          >
            {{ submitMessage }}
          </button>
        </el-tooltip>
        <button
          @click="goNextFlow()"
          v-else
          class="btn btn3"
          v-bind:class="{
            active: btn & radio,
            actives: submitMessage == '提交中'
          }"
        >
          <!-- -->
          {{ submitMessage }}
        </button>
      </div>
    </div>
    <!-- 上传申请文件弹框开始 -->
    <el-dialog title="上传申请文件" :visible.sync="applyFileVisible" width="35%" center>
      <!-- 内容区域 -->
      <div
        style="display: flex; justify-content: center; align-items: center"
        class="dialog-center"
      >
        <ul>
          <li>
            <el-form label-width="100px">
              <el-form-item label="申请文件上传">
                <el-upload
                  class="upload"
                  ref="upload"
                  action="string"
                  :file-list="fileList"
                  :auto-upload="false"
                  :http-request="uploadFile"
                  :on-change="handleChange"
                  multiple="multiple"
                >
                  <span class="file" slot="trigger" size="small" type="primary" @click="delFile"
                    >文件上传</span
                  >
                </el-upload>
                <span class="file"></span>
              </el-form-item>
            </el-form>
          </li>
        </ul>
      </div>
      <!-- 按钮区域 -->
      <!--  -->
      <!-- -->
      <div slot="footer" class="dialog-footer">
        <button class="dialog-footer-bnt btn1" @click="callOffApply()">取 消</button>
        <button class="dialog-footer-bnt btn2" @click="applyFile()">确 定</button>
      </div>
    </el-dialog>
    <!-- 查看图片信息 -->
    <el-dialog title="申请文件" :visible.sync="contractCardbackVisible" width="40%" center>
      <!-- 内容区域 -->
      <div
        v-viewer
        v-if="FileImg != ''"
        style="text-align: center; width: 300px; height: 300px"
        class="dialog-center"
        @click="contractCardbackVisible = false"
      >
        <img style="width: 100%; height: 100%; margin-bottom: 15px" :src="FileImg" alt="" />
        <p style="margin-top: 50px">点击图片可查看大图</p>
      </div>

      <div v-else style="text-align: center; margin-bottom: 30px" class="dialog-center">
        <h4>暂无详细资料</h4>
      </div>
      <!-- 按钮区域 -->
      <!-- <div slot="footer" class="dialog-footer">
        <button
          class="dialog-footer-bnt btn1"
          @click="contractCardbackVisible = false"
        >
          取 消
        </button>
        <button
          class="dialog-footer-bnt btn2"
          @click="contractCardbackVisible = false"
        >
          确 定
        </button>
      </div> -->
    </el-dialog>
    <!-- 弹窗 -->
    <!--签署协议弹窗开始 -->
    <el-dialog
      class="inviteAffirmClient"
      :closeOnClickModal="false"
      title=""
      :visible.sync="showAgreementVisible"
      width=""
    >
      <!-- 内容区域 -->
      <div class="dialog-centerss" v-loading="loading">
        <template v-if="list">
          <el-tabs v-model="activeName">
            <el-tab-pane v-for="item in list" :key="item.url" :label="item.name" :name="item.names">
              <div class="first">
                <iframe
                  style="border: none"
                  width="100%"
                  height="100%"
                  v-bind:src="item.url"
                ></iframe>
              </div>
            </el-tab-pane>
          </el-tabs>
        </template>
      </div>
      <!-- 按钮区域 -->
      <div slot="footer" class="dialog-footerss">
        <button :disabled="isLock" class="dialog-footer-bnt btn2" @click="sign">去签署</button>
      </div>
    </el-dialog>
    <!-- 签署协议弹窗结束 -->
    <!--签署协议提示开始 -->
    <el-dialog
      class="hint"
      :closeOnClickModal="false"
      title="合同签署"
      :visible.sync="hintVisible"
      width=""
    >
      <!-- 内容区域 -->
      <div class="dialog-center-hint">
        <p>
          签署短信已发送至经办人手机{{ operatetel | getPhone }}、法定代表人手机{{
            officertel | getPhone
          }}，请点击短信签署链接完成签署操作。
        </p>
      </div>
      <!-- 按钮区域 -->
      <div slot="footer" class="dialog-footer">
        <button
          style="background: #fff; color: #3f6ef2"
          class="dialog-footer-bnt btn2"
          @click="aaaa"
        >
          确定
        </button>
        <button
          v-bind:class="{ actives: submitMessage == '提交中' }"
          class="dialog-footer-bnt btn2"
          @click="goNextFlow()"
        >
          {{ submitMessage }}
        </button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getFilePath,
  base,
  busnessSubmitsSXB,
  Contract,
  Contracts,
  createContractReview
} from '@/utils'
export default {
  data() {
    return {
      submitMessage: '提交',
      contractStatuss: true, //签署状态
      isLock: false,
      QYSQreportUrl: '',
      JSFWreportUrl: '',
      activeName: 'first', //标签页默认
      showAgreementVisible: false, //协议弹框:
      hintVisible: false,
      disabled: false,
      officertel: '', //法人手机号
      operatetel: '', //经办人手机号
      loading: true,

      list: null,
      base: '', //服务器跟地址
      radio: false, //企业授权服务状态变量
      btn: false, //提交按钮是否可用状态变量
      procedureId: '', // 从路由地址中获取产品ID,保存到状态变量中
      applyFileVisible: false, //上传文件弹窗
      contractCardbackVisible: false, //查看图片弹窗
      FileImg: '', //图片变量
      ProductList: null,
      fileList: [],
      applyid: null,
      newApplyid: null,
      // 合同签署数据
      contract: {
        // conno: "35555588889885545",
        // contype: "",
        applyid: '',
        entname: '',
        FRaccountid: '',
        inputdate: '',
        JBRaccountid: '',
        licenseno: '',
        mainindname: '',
        officer: '',
        officertel: '',
        ORGaccountid: '',
        productcode: '',
        radio: '',
        ticketadder: '',
        ticketbank: '',
        ticketbankno: '',
        tickethead: '',
        ticketno: '',
        tickettel: '',
        step: 'apply'
      },
      // 申请文件表格数据
      applyData: [
        {
          number: 1,
          name: '统一社会信用代码证 （图片）',
          yszkje: '未上传'
        },
        {
          number: 2,
          name: '对外贸易经营者备案登记表 （图片）',
          yszkje: '未上传'
        },
        {
          number: 3,
          name: '出口货物退（免）税认定表 （图片）',
          yszkje: '未上传'
        },
        {
          number: 4,
          name: '开户许可证 （图片）',
          yszkje: '未上传'
        }
      ],
      yszkje0: null,
      yszkje1: null,
      yszkje2: null,
      yszkje3: null
    }
  },
  // 过滤器
  filters: {
    // 手机号脱敏
    getPhone: function (value) {
      if (!value) return value
      value = value.replace(/(\d{3})\d*(\d{4})/, '$1****$2')
      return value
    }
  },
  // 监听器
  watch: {
    radio() {
      if (
        this.applyData[0].yszkje == '已上传' &&
        this.applyData[1].yszkje == '已上传' &&
        this.applyData[2].yszkje == '已上传' &&
        this.applyData[3].yszkje == '已上传'
      ) {
        this.btn = true
      } else {
        this.btn = false
      }
    },
    yszkje0() {
      if (
        this.applyData[0].yszkje == '已上传' &&
        this.applyData[1].yszkje == '已上传' &&
        this.applyData[2].yszkje == '已上传' &&
        this.applyData[3].yszkje == '已上传' &&
        this.radio
      ) {
        this.btn = true
      }
    },
    yszkje3() {
      if (
        this.applyData[0].yszkje == '已上传' &&
        this.applyData[1].yszkje == '已上传' &&
        this.applyData[2].yszkje == '已上传' &&
        this.applyData[3].yszkje == '已上传' &&
        this.radio
      ) {
        this.btn = true
      }
    },
    yszkje1() {
      if (
        this.applyData[0].yszkje == '已上传' &&
        this.applyData[1].yszkje == '已上传' &&
        this.applyData[2].yszkje == '已上传' &&
        this.applyData[3].yszkje == '已上传' &&
        this.radio
      ) {
        this.btn = true
      }
    },
    yszkje2() {
      if (
        this.applyData[0].yszkje == '已上传' &&
        this.applyData[1].yszkje == '已上传' &&
        this.applyData[2].yszkje == '已上传' &&
        this.applyData[3].yszkje == '已上传' &&
        this.radio
      ) {
        this.btn = true
      }
    }
  },
  // 生命周期方法
  mounted() {
    // 从路由地址中获取产品ID,保存到状态变量中
    this.procedureId = localStorage.getItem('id')
    this.productcode = localStorage.getItem('productcode')
    this.applyid = this.$route.query.applyid
    this.newApplyid = this.$route.query.newApplyid
    this.base = base
    this.getFilePath()
  },
  methods: {
    // 点击去签署按钮
    async sign() {
      this.isLock = true
      setTimeout(() => {
        this.isLock = false
      }, 500)
      this.loading = true
      let data = await Contract(this.contract)
      if (data.code == 100) {
        this.loading = false
        this.radio = true
        this.showAgreementVisible = false
        this.hintVisible = true
        this.flowId = data.data.flowId
        // this.officertel = sessionStorage.getItem("userPhone");
      }
    },
    // 签署协议提示确认键
    aaaa() {
      this.hintVisible = false
    },
    // 点击弹框取消按钮
    callOffApply() {
      this.applyFileVisible = false
      this.$Message.warning('取消上传')
      this.fileList = []
    },
    // 点击弹框确认按钮
    applyFile() {
      if (this.applyName.trim() != 0 && this.fileList.length != 0) {
        this.applyFileVisible = false
        let formData = new FormData()
        formData.append('file', this.fileList[0].raw)
        let url =
          this.base +
          `/api/KJApply/fileadd?objecttype=SXBfile&applyid=${this.applyid}&newfilename=${this.applyName}`
        this.axios
          .post(url, formData, {
            'Content-Type': 'multipart/form-data'
          })
          .then(res => {
            if (res.data.msg == 'ok') {
              this.getFilePath()
              this.$Message.success('文件上传成功')
              this.fileList = []
            } else {
              this.$Message.error('文件上传失败，请检查文件信息')
            }
          })
      } else {
        this.$Message.error('请补充内容')
      }
    },
    // 补充申请资料文件
    applyFileUpload(index, row) {
      this.applyFileVisible = true
      this.applyName = row[index].name.split(' ')[0]
    },
    // 查看申请资料
    async checkApply(index, row) {
      let name = row[index].name.split(' ')[0]
      let { data } = await getFilePath(this.applyid)
      for (let i = 0; i < data.length; i++) {
        if (data[i].name == name) {
          this.contractCardbackVisible = true
          this.FileImg = data[i].path
        }
      }
    },
    // 获取文件信息
    async getFilePath() {
      let { data } = await getFilePath(this.applyid)
      let other = []
      for (let i = 0; i < data.length; i++) {
        if (data[i].type == 'other') {
          other.push(data[i])
        } else if (data[i].type == 'SXBfile') {
          if (data[i].name == '统一社会信用代码证') {
            this.applyData[0].yszkje = '已上传'
            this.yszkje0 = '已上传'
          } else if (data[i].name == '对外贸易经营者备案登记表') {
            this.applyData[1].yszkje = '已上传'
            this.yszkje1 = '已上传'
          } else if (data[i].name == '出口货物退（免）税认定表') {
            this.applyData[2].yszkje = '已上传'
            this.yszkje2 = '已上传'
          } else if (data[i].name == '开户许可证') {
            this.applyData[3].yszkje = '已上传'
            this.yszkje3 = '已上传'
          }
        }
      }
    },
    // 点击提交
    async goNextFlow() {
      if (this.submitMessage == '提交中') return
      if (
        this.radio &&
        this.applyData[0].yszkje == '已上传' &&
        this.applyData[1].yszkje == '已上传' &&
        this.applyData[2].yszkje == '已上传' &&
        this.applyData[3].yszkje == '已上传'
      ) {
        this.submitMessage = '提交中'
        let data = await busnessSubmitsSXB(this.applyid, this.newApplyid)
        if (data.code == 100) {
          this.$Message.success('申请提交成功')
          this.$router.push('/cyedApplication3')
          this.hintVisible = false
          setTimeout(() => {
            this.submitMessage = '提交'
          }, 3000)
        } else {
          this.submitMessage = '提交'
        }
      }
    },
    //点击上传文件触发的额外事件,清空fileList
    delFile() {
      this.fileList = []
    },
    handleChange(file, fileList) {
      this.fileList = fileList
    },
    //自定义上传文件
    uploadFile(file) {
      this.formData.append('file', file.file)
    },

    // 点击勾选协议按钮
    async submitBtn() {
      if (this.radio) return
      if (
        this.applyData[0].yszkje != '已上传' ||
        this.applyData[1].yszkje != '已上传' ||
        this.applyData[2].yszkje != '已上传' ||
        this.applyData[3].yszkje != '已上传'
      ) {
        return this.$Message.error('请上传申请资料')
      }
      let productcode = this.productcode
      let parameter = {
        productcode: productcode,
        entname: sessionStorage.getItem('entname')
      }
      this.loading = true
      this.showAgreementVisible = true
      let data = await Contracts(parameter)
      if (data.code != 100) {
        this.showAgreementVisible = false
        this.$Message.error('请上传申请资料')
        this.loading = false
        return
      }
      this.officertel = data.data.ent.fincerttel
      this.operatetel = data.data.ent.operateTel
      this.contract.entname = data.data.ent.entname
      this.contract.FRaccountid = data.data.ent.fraccountid
      this.contract.inputdate = data.data.ent.inputdate
      this.contract.JBRaccountid = data.data.ent.jbRaccountid
      this.contract.licenseno = data.data.ent.licenseno
      this.contract.mainindname = data.data.ent.mainindname
      this.contract.officer = data.data.ent.operatename
      this.contract.officertel = data.data.ent.fincerttel
      this.contract.ORGaccountid = data.data.ent.qyaccountid
      data.data.coopeorg
        ? (this.contract.ticketbank = data.data.coopeorg.ticketbank)
        : (this.contract.ticketbank = '')
      data.data.coopeorg
        ? (this.contract.ticketbankno = data.data.coopeorg.ticketaccountno)
        : (this.contract.ticketbankno = '')
      data.data.coopeorg
        ? (this.contract.tickettel = data.data.coopeorg.tickettel)
        : (this.contract.tickettel = '')
      this.contract.productcode = this.productcode
      this.contract.radio = data.data.radio
      this.contract.applyid = this.applyid
      let GetcreateContractReview = await createContractReview(this.contract)
      if (GetcreateContractReview.code == 100) {
        this.contractStatuss = GetcreateContractReview.data.statuss
        if (this.contractStatuss) {
          this.list = GetcreateContractReview.data.data
          for (let i = 0; i < this.list.length; i++) {
            if (this.list[i].name == '企业授权协议.pdf') {
              this.list[i].name = this.list[i].name.split('.')[0]
              this.list[i].names = 'first'
            } else if (this.list[i].name == '技术服务协议.pdf') {
              this.list[i].name = this.list[i].name.split('.')[0]
              this.list[i].names = 'second'
            }
          }
          this.loading = false
        } else {
          this.list = GetcreateContractReview.data.data.file
          for (let i = 0; i < this.list.length; i++) {
            if (this.list[i].name == '企业授权协议.pdf') {
              this.list[i].name = this.list[i].name.split('.')[0]
              this.list[i].names = 'first'
            } else if (this.list[i].name == '技术服务协议.pdf') {
              this.list[i].name = this.list[i].name.split('.')[0]
              this.list[i].names = 'second'
            }
          }
          this.loading = false
        }
      } else {
        this.showAgreementVisible = false
        this.$Message.error('请上传申请资料')
      }
      // this.submitBtns();
    }
  }
}
</script>

<style lang="scss" scoped>
.boxs {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background-color: #fff;
  .f1 {
    margin-top: 20px;
    ul {
      display: flex;
      align-items: center;
      li {
        display: flex;
        flex-direction: column;
        height: 40px;
        .icon {
          .icon1 {
            width: 40px;
          }
          .icon2 {
            height: 2px;
            margin: 0 16px;
          }
        }
        span {
          font-size: 20px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #627dca;
          margin-left: -0.2188rem;
          margin-top: 3px;
        }
      }
    }
  }
  .unit {
    position: relative;
    width: 90%;
    height: 20px;
    font-size: 16px;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #b3b3b3;
    font-size: 14px;
    color: #606266;
    p {
      position: absolute;
      @media only screen and (min-width: 1580px) and (max-width: 1950px) {
        right: 15.1%;
      }
      right: 5.5%;
      top: -3px;
    }
  }
  .f2 {
    box-sizing: border-box;
    padding: 20px 25px;
    margin-top: 5%;
    width: 100%;
    .notNull {
      width: 100%;
      // 新增按钮
      .newly {
        display: flex;
        width: 140px;
        margin: 30px 1px;
        h4 {
          font-size: 14px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #808080;
          margin-right: 8px;
          cursor: pointer;
        }
        h5 {
          width: 46px;
          height: 20px;
          background: #3f6ef2;
          border-radius: 2px;
          font-size: 14px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #ffffff;
          text-align: center;
          margin-left: 5px;
          margin-top: 1px;
          cursor: pointer;
        }
      }

      // 表格编辑/查看
      .span {
        display: inline-block;
        width: 30px;
        height: 24px;
        font-size: 14px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #3f6ef2;
        border-bottom: 1px solid #3f6ef2;
        cursor: pointer;
        margin-right: 5px;
      }
      .disable {
        color: #aaa;
        border-bottom: 1px solid #aaa;
      }
    }
  }
  .f2::-webkit-scrollbar {
    width: 5px;
    height: 10px;
    background-color: #fff;
  }

  .f2::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background: rgba(36, 143, 172, 0.5);
  }
  // 弹出框
  .dialog-center {
    width: 75%;
    margin: 0 auto;
    padding: 15px;
  }
  .dialog-footer {
    display: flex;
    justify-content: space-evenly;
    width: 70%;
    margin: 0 auto;
    z-index: 9999;
    .dialog-footer-bnt {
      width: 121px;
      height: 31px;
      color: #3f6ef2;
      border: 1px solid #3f6ef2;
      border-radius: 4px;
      background-color: #fff;
      z-index: 9999;
    }
    .btn2 {
      color: #fff;
      background-color: #3f6ef2;
      z-index: 9999;
      &.actives {
        background-color: rgba(10, 123, 224, 0.6);
        border: 0px;
      }
    }
  }
  .el-form-item {
    margin-bottom: 20px;
    @media only screen and (min-width: 1580px) and (max-width: 1950px) {
      margin-bottom: 22px;
    }
    height: 45px;
    .file {
      font-size: 14px;
      margin-right: 10px;
      color: #3f6ef2;
      text-decoration: underline;
      cursor: pointer;
      z-index: 999999;
    }
    .file1 {
      color: #999;
    }
  }
  .f3 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 55px;
    @media only screen and (min-width: 1580px) and (max-width: 1950px) {
      bottom: 70px;
    }
    width: 275px;
    height: 34px;
    background: #3f6ef2;
    border-radius: 4px;
    font-size: 18px;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #ffffff;
    cursor: pointer;
  }
  // 服务协议
  .agreement {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 25px;
    text-align: center;
    margin-top: 10px;
    user-select: none;
    span {
      font-size: 14px;
      color: #666;
      margin-left: 7px;
    }
    img {
      width: 15px;
      height: 15px;
      cursor: pointer;
    }
    a {
      cursor: pointer;
      font-size: 14px;
      color: #3f6ef2;
    }
  }
  // 按钮组
  .submit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    margin: 5px 0 5px 0;
    cursor: pointer;
    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 180px;
      height: 34px;
      background: #3f6ef2;
      border-radius: 4px;
      font-size: 18px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #ffffff;
      margin-right: 30px;
    }
    .btn1 {
      background-color: #bfbfbf;
    }
    // 提交按钮
    .btn3 {
      background-color: #ccc;
      &.active {
        background-color: #3f6ef2;
      }
    }
  }
}
// 弹出框
.dialog-centerss {
  box-sizing: border-box;
  padding: 0 0.026rem;
  display: flex;
  justify-content: center;
  width: 100%;
  // 小屏
  @media only screen and (min-width: 900px) and (max-width: 1535px) {
    height: 3.05rem;
  }
  // 中屏
  @media only screen and (min-width: 1536px) and (max-width: 1919px) {
    height: 2.8rem;
  }
  // 大屏
  @media only screen and (min-width: 1920px) and (max-width: 2580px) {
    height: 3.4375rem;
  }
  .first {
    display: flex;
    justify-content: center;
    align-items: center;
    // 小屏
    @media only screen and (min-width: 900px) and (max-width: 1535px) {
      min-width: 3.125rem;
      height: 2.3958rem;
    }
    // 中屏
    @media only screen and (min-width: 1536px) and (max-width: 1919px) {
      width: 3.125rem;
      height: 2.3958rem;
    }
    // 大屏
    @media only screen and (min-width: 1920px) and (max-width: 2580px) {
      width: 3.9583rem;
      height: 3.0208rem;
    }

    background-color: #fff;

    h1 {
      font-size: 0.0938rem;
    }
  }
}
.dialog-footerss {
  display: flex;
  justify-content: space-evenly;
  width: 70%;
  margin: 0 auto;
  .dialog-footer-bnt {
    width: 0.6302rem;
    height: 0.1615rem;
    color: #3f6ef2;
    border: 0.0052rem solid #3f6ef2;
    border-radius: 0.0208rem;
    background-color: #fff;
  }
  .btn2 {
    color: #fff;
    background-color: #3f6ef2;
    &.actives {
      background-color: rgba(10, 123, 224, 0.6);
    }
  }
}
.abc {
  width: 1.9167rem;
  .el-select {
    width: 100%;
  }
}
.dialog-center-hint {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 0.1042rem;
  font-size: 0.0885rem;
}
::v-deep .hint .el-dialog {
  @media only screen and (min-width: 900px) and (max-width: 1535px) {
    width: 52%;
  }
  @media only screen and (min-width: 1536px) and (max-width: 1919px) {
    width: 50%;
  }
  @media only screen and (min-width: 1920px) and (max-width: 2580px) {
    width: 49%;
  }
}
::v-deep .hint .el-dialog__body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 20px;
}
// 协议
::v-deep .inviteAffirmClient .el-dialog {
  // 小屏
  @media only screen and (min-width: 900px) and (max-width: 1535px) {
    width: 45%;
    // background-color: #f0f;
  }
  // 中屏
  @media only screen and (min-width: 1536px) and (max-width: 1919px) {
    width: 45%;
    // background-color: #ff0;
  }
  // 大屏
  @media only screen and (min-width: 1920px) and (max-width: 2580px) {
    width: 50%;
    // background-color: #f00;
  }
}
::v-deep .inviteAffirmClient .el-dialog__header {
  border: 0;
  padding: 5px 20px;
}
/* 输入框样式  */
::v-deep .el-input__inner {
  box-sizing: border-box;
  width: 280px;
  height: 39px;
  font-size: 14px;
  border: 1px solid #e0e0e0;
  border-radius: 0px;
  padding: 10px 10px;
  color: #606266;
  outline: 0;
  line-height: 35px !important;
}
</style>
<style lang="scss">
//表格
.el-table {
  th.el-table__cell > .cell {
    font-size: 16px;
    font-weight: 400;
  }
  .cell {
    font-size: 16px;
  }
}
/* 邀请客户弹窗 */
.el-dialog--center .el-dialog__body {
  padding: 20px 0 0px;
}
.el-form-item__label {
  padding-right: 6px !important;
}
.el-upload-list__item:first-child {
  margin-top: -10px;
}
.el-upload-list__item-name {
  margin-left: 2px !important;
  margin-top: -32px !important;
  z-index: 0;
}
.el-upload-list__item:first-child {
  width: 210px;
  margin-top: -10px;
  margin-left: 72px;
}
</style>
